<template lang="html">
  <div class="details">
    <div class="det" v-for="(item,index) in best" :key="index">
      <router-link to="/vedio">
      	<img :src="item.img">
      </router-link>
    	<div class="det_text">
    		<p class="det-big">{{item.course}}</p>
    		<p class="det-samll">{{item.break}}</p>
    		<span class="det_hs">{{item.number}}次学习</span>
    		<span class="det_ls">{{item.price}}</span>
    	</div>
    </div>
  </div>
</template>

<script>
import best from "../../../static/data/best.json"
export default {
  name:"course",
  data(){
    return{
      best:[]
    }
  },
  components:{
    
  },
  created(){
    this.best = best
    // console.log(this.course)
  }
}
</script>

<style scoped lang="less">

.det{
	margin-bottom: 5/50rem;
	background-color: #fff;
	overflow: hidden;
}
.det img{
	margin:20/50rem;
	float: left;
	width: 180/50rem;
}
.det_text{
	margin:10/50rem;
}
.det_text .det-big{
	font-size: 18/50rem;
	margin-bottom: 10/50rem;
}
.det_text .det-samll{
	font-size: 16/50rem;
	margin-bottom: 10/50rem;
}
.det_text .det_hs{
	display: inline-block;
	font-size: 14/50rem;
	margin-right: 20/50rem;
	color: #9D9D9D;
}
.det_text .det_ls{
	display: inline-block;
	font-size: 14/50rem;
	// margin-right: 10/50rem;
	color: #3DAE95;
}

</style>
